/*—————————————————————————————————————————————————*
|  Saurus ∷ WhiteLabel Transação ∷                 |
*——————————————————————————————————————————————————*/

/* ╔═══════════════════════════════════════════╗ 
   ║      ⫸⫸ Configurações Rápidas            ║
   ╚═══════════════════════════════════════════╝ 
*/

/* ►► Cores ◄◄  */
:root {
    --degrade-botoes: linear-gradient(292deg, rgba(111,38,150,1) 0%, rgba(135,83,162,1) 100%);
    --degrade-barra-navegacao: linear-gradient(292deg, rgba(111,38,150,1) 0%, rgba(135,83,162,1) 100%);
    --degrade-rodape: linear-gradient(125deg, rgba(111,38,150,1) 0%, rgba(172,113,204,1) 100%);
    --resposta-pagamento: rgba(135,83,162,1);
    --cor-principal: rgba(135,83,162,1);
    --circulos: rgba(135,83,162, .7);
    --topo-tabela: #452953;
    --degrade-cartao-de-credito: radial-gradient(at 87% 8%, hsla(284,92%,66%,1) 0, transparent 46%), radial-gradient(at 2% 98%, hsla(345,77%,69%,1) 0, transparent 56%), radial-gradient(at 0% 0%, hsla(290,98%,70%,1) 0, transparent 56%), radial-gradient(at 39% 100%, hsla(291,60%,60%,1) 0, transparent 79%), radial-gradient(at 87% 84%, hsla(303,44%,44%,1) 0, transparent 70%);
}

/* ►► Rodapé ◄◄  */
:root {
    --formato-rodape: polygon(14% 100%, 0 100%, 0 76%, 26% 81%, 55% 76%, 76% 77%, 100% 76%, 100% 100%, 85% 100%, 65% 100%, 50% 100%, 32% 100%);
    --altura-rodape: 80%;
}

/* ►► Barra de navegação ◄◄  */
:root { 
    --tamanho-logo: 120px;
}

/* ╔═══════════════════════════════════════════╗ 
   ║      ⫸⫸ Configurações Detalhadas         ║
   ╚═══════════════════════════════════════════╝ 
*/

/* ――――――――――― Barra de navegação ――――――――――― */
.ui.inverted.segment.my-nav {
    background-image: var(--degrade-barra-navegacao) !important;
}

.ui.inverted.segment.my-nav.esp{
    background-image: var(--cor-principal) !important;
    background-color: var(--cor-principal) !important;
}

#nav-img {
    width: var(--tamanho-logo) !important;
}

/* ――――――――――― Rodapé ――――――――――― */
.footer {
    background-image: var(--degrade-rodape) !important;
    clip-path: var(--formato-rodape) !important;
    height: var(--altura-rodape) !important;
    
}

table thead tr{
    background-color: var(--topo-tabela) !important; 
}

.circle {
    background-color: var(--circulos) !important;
}

.esp-footer {
    background-color: var(--cor-principal) !important;
    clip-path: var(--formato-rodape) !important;
    height: var(--altura-rodape) !important;
    
}

/* ――――――――――― Tela de resposta do pagamento ――――――――――― */
.resposta-head.cancelado {
    background-image: linear-gradient(248deg, rgba(207,36,67,1) 0%, rgba(164,48,112,1) 87%, var(--resposta-pagamento) 100%) !important;
}
.resposta-head.concluido {
    background-image: linear-gradient(248deg, rgba(45,167,93,1) 29%, var(--resposta-pagamento) 100%) !important;
}
.resposta-head.estornado {
    background-image: linear-gradient(198deg, rgba(215,159,64,1) 0%, rgba(200,143,79,1) 43%, var(--resposta-pagamento) 100%) !important;
}
.resposta-head.pendente {
    background-image: linear-gradient(191deg, rgba(255,255,255,1) 0%, var(--resposta-pagamento) 100%) !important;
}

/* ――――――――――― Objetos do site ――――――――――― */

svg path {
    fill-opacity: 0.8 !important;
    fill: var(--cor-principal) !important;
}

/* ――――――――――― Cartão de crédito ――――――――――― */


.jp-card .jp-card-back, .jp-card .jp-card-front {
    background: var(--cor-principal) !important;
    border-radius: 15px !important;
    background-image: var(--degrade-cartao-de-credito) !important;
}

.jp-card.jp-card-identified .jp-card-front:before, .jp-card.jp-card-identified .jp-card-back:before {
    background-image: var(--degrade-cartao-de-credito) !important;
}